<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>让坦克开起来</title>
    <style type="text/css">
      input {
        font-size: 26px;
        margin-top: 20px;
      }
      body {
        background-image: url(grassland.png);
      }
      #mytank {
        position: absolute;
        left: 10px;
        top: 100px;
      }
    </style>
  </head>
  <body>
    <img id="mytank" src="right.png" />
    <script>
      var tank = document.getElementById("mytank");//219970242张轩珲
      // 初始位置
      var x = 10,
        y = 100;
      // 监听键盘事件
      document.onkeydown = function (event) {
        //获取事件对象的兼容处理
        var e = event || window.event || arguments.callee.caller.arguments[0];
        // 左移
        if (e && e.keyCode == 65) {
          tank.src = "left.png";
          //判断边界
          if (x > 10) {
            x -= 10;
          }
          tank.style.left = x + "px";
        }
        // 上移
        if (e && e.keyCode == 87) {
          tank.src = "up.png";
          //判断边界
          if (y > 10) {
            y -= 10;
          }
          tank.style.top = y + "px";
        }
        // 右移
        if (e && e.keyCode == 68) {
          tank.src = "right.png";
          //判断边界
          if (x < 1920) {
            x += 10;
          }
          tank.style.left = x + "px";
        }
        // 下移
        if (e && e.keyCode == 83) {
          tank.src = "down.png";
          //判断边界
          if (y < 1280) {
            y += 10;
          }
          tank.style.top = y + "px";
        }
      };
      //用oncontextmenu事件单禁用右键菜单
      document.oncontextmenu = function () {
        return false;
      };
    </script>
  </body>
</html>
